<template>
    <div>
        app
        <button @click="handleClick">click</button>
        <!-- 元素节点 -->
        <input type="text" ref="myinput">
        <div ref="mydiv">aaa</div>
        <!-- 组件 -->
        <Child ref="mychild"></Child>

        <hr>

        <!-- 此时ref方式比子传父更方便 -->
        <Field mylabel="用户名" mytype="text" ref="myusername"></Field>
        <Field mylabel="密码" mytype="password" ref="mypassword"></Field>
        <Field mylabel="年龄" mytype="number" ref="myage"></Field>

        <button @click="handleRegister">提交</button>
        <button @click="handleReset">重置</button>
    </div>
</template>

<script>
import Child from './Child.vue';
import Field from './Field.vue';

export default {
    components: {
        Child,
        Field
    },
    methods: {
        handleClick() {
            // console.log(this.$refs.myinput.value);
            // this.$refs.mydiv.style.background = "pink";
            this.$refs.mychild.childTitle = "222"
        },
        handleRegister() {
            console.log(this.$refs);
            console.log(this.$refs.myusername.myvalue, this.$refs.mypassword.myvalue, this.$refs.myage.myvalue);
        },
        handleReset() {
            this.$refs.myusername.myvalue = "";
            this.$refs.mypassword.myvalue = "";
            this.$refs.myage.myvalue = "";
        }
    }
}
</script>